@charset "UTF-8";
:root{font-size: 62.5% !important;}

[class*=show_]{display: none;}
.block{display: block;}
.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}

@media screen and (max-width: 1200px){
  .hide_1200{display: none !important;}
  .show_1200{display: initial;}
  .show_1200.block{display: block;}
  .show_1200.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}
  br.show_1200{display: block;}
;}

@media screen and (max-width: 992px){
  .show_992{display: initial;}
  .show_992.block{display: block;}
  .show_992.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}
  .hide_992{display: none;}
  br.show_992{display: block;}
;}

@media screen and (max-width: 768px){
  .show_768{display: initial;}
  .show_768.block{display: block;}
  .show_768.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}
  .hide_768{display: none;}
  br.show_768{display: block;}
;}

@media screen and (max-width: 576px){:root{font-size: 60% !important;}
  .show_576{display: initial;}
  .show_576.block{display: block;}
  .show_576.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}
  br.show_576{display: block;}
  .hide_576{display: none;}
;}

.teacher .inner{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 20px 0 0 0; gap: initial;}

.teacher_top{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; /*  height: 200px; background-image: url("https://img.megastudyacademy.co.kr/campus/mbc/branch/branch_top_bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; */}

.teacher .tab_base{width: 100%; margin-bottom: 40px;}

.teacher .category{margin-bottom: 55px;}
/*.teacher .category li button{color: #222222;}*/
.teacher .category li.on button{/*color: #222222;*/font-weight: 700;}
.teacher .category li::before{display: none;}

.teacher .table_wrap{width: 100%;}

.teacher .teacher_wrap{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; gap: 20px;}
.teacher .teacher_wrap li{position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: calc(25% - 15px); height: 360px; padding: 45px 0 0 30px; /* background-color: #f0f0f0; */ border-bottom: 0; overflow: hidden; border-radius: 5px; background: #e6eaf1;}
.teacher .teacher_wrap li:first-of-type{border-top: 0;}
.teacher .teacher_wrap li:hover{cursor: pointer;}
.teacher .teacher_wrap li:hover .type,
.teacher .teacher_wrap li:hover .name{color: #ffffff;}
.teacher .teacher_wrap li:hover .overlay{position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; height: 100%; padding: 45px 0 0 30px; /* background-color: rgba(0, 130, 255, 0.9); */ background: rgba(5, 5, 5, 0.78); opacity: 1; z-index: 2;}
.teacher .teacher_wrap li:hover .overlay p{margin-top: 40%; margin-bottom: 33px; line-height: 1.5; color: #229aff; font-size: 16px; text-align: left; font-weight: 600;}

.teacher .teacher_wrap li .overlay > p{transform: translateY(30px); opacity: 0; transition: transform .3s ease, opacity .3s ease;}
.teacher .teacher_wrap li:hover .overlay > p{transform: translateY(0); opacity: 1;}

.teacher .teacher_wrap li:hover .overlay span{display: block;/* color: #dddddd; font-size: 14px; */ color: #000; font-size: 12px; text-align: left; cursor: pointer; border-radius: 30px; padding: 5px 12px 7px; background: #efefef; font-weight: 500;}
.teacher .teacher_wrap .table_td{width: 100%; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; min-height: initial; padding: 0;}
.teacher .teacher_wrap .table_td.img{position: absolute; right: -45px; bottom: -75px; width: initial; height: initial; width: 280px; height: 412px;}
.teacher .teacher_wrap .table_td.img > img{width: 100%; height: 100%; -o-object-fit: cover;  object-fit: cover;}
.teacher .teacher_wrap .table_td.type{margin-bottom: 16px; color: #000000; /*font-size: 20px;*/ font-size: 16px; z-index: 3;}
.teacher .teacher_wrap .table_td.name{position: relative; margin-bottom: 16px; padding-bottom: 37px; color: #000000; font-size: 20px; font-weight: 700; z-index: 3; display: block;}
/* .teacher .teacher_wrap .table_td.name::before{position: absolute; top: 37px; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); content: "강사";} */
.teacher .teacher_wrap .table_td.name p{/* position:absolute; top:27px; */ font-weight: 300; line-height: 1.5;}
.teacher .teacher_wrap .table_td.new{display: inline-block; width: 51px; height: 19px; line-height: 17px; color: #ffffff; font-size: 12px; text-align: center; background-color: #0082ff; border-radius: 40px; z-index: 1;}
.teacher .teacher_wrap .overlay{opacity: 0;}

.teacher .table_pagination{margin: 50px auto;}
.teacher .sub_bottom_text{width: 100%; margin: 55px 0 100px 0; line-height: 1.5; color: #000000; font-size: 28px; font-weight: bold; text-align: center;}
.teacher .sub_bottom_text span{color: #0082ff;}

.teacher .bnr{background: #111;}
.teacher .bnr .inner{padding: 0;}

.teacher .banner{background-color: #203b5b;}
.teacher .banner .inner{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 50px 60px 50px 120px; background-image: url("https://img.megastudyacademy.co.kr/campus/mbc/branch/banner_bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;}

.teacher .banner .con_title{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
.teacher .banner .con_title h4{line-height: 1.4; color: #ffffff; font-size: 20px; font-weight: 700; text-align: left;}

.teacher .banner .con_box{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.teacher .banner .con_box a{position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 264px; height: 53px; padding-right: 10px; color: #ffffff; font-size: 20px; font-weight: 700; border: 1px solid #ffffff; border-radius: 40px;}
.teacher .banner .con_box a::before{position: absolute; top: 50%; right: 42px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); content: ""; width: 10px; height: 16px; background-image: url("https://img.megastudyacademy.co.kr/campus/mbc/branch/icon_arrow_white.png"); background-repeat: no-repeat; background-position: center; background-size: contain;}

@media screen and (max-width: 1220px){
  .teacher .inner{max-width: initial; padding: 20px 10px 0 10px;}
;}

@media screen and (max-width: 1200px){
  .teacher .inner{padding: 2rem 1rem 0 1rem;}
  .teacher_top{height: 20rem;}
  .teacher_top h2{font-size: 2.6rem;}
  .teacher .tab_base{margin-bottom: 4rem;}
  .teacher .category{margin-bottom: 5.5rem;}
  .teacher .teacher_wrap{gap: 1rem;}
  .teacher .teacher_wrap li{width: calc(25% - 0.8rem); height: 36rem; padding: 4rem 0 0 2.5rem;}
  .teacher .teacher_wrap li:hover .overlay{padding: 4rem 0 0 2.5rem;}
  .teacher .teacher_wrap li:hover .overlay p{margin-top: 40%; margin-bottom: 3.3rem; font-size: 1.6rem;}
  .teacher .teacher_wrap li:hover .overlay span{font-size: 1.4rem;}
  .teacher .teacher_wrap .table_td.img{bottom: -10rem; width: calc(25vw - 1.25rem); height: calc(37vw - 1.25rem);}
  .teacher .teacher_wrap .table_td.type{margin-bottom: 1.6rem; font-size: 2rem;}
  .teacher .teacher_wrap .table_td.name{margin-bottom: 1.6rem; padding-bottom: 3rem; font-size: 2rem;}
  .teacher .teacher_wrap .table_td.name::before{top: 3.7rem;}
  .teacher .teacher_wrap .table_td.new{width: 5.1rem; height: 1.9rem; line-height: 1.7rem; font-size: 1.2rem; border-radius: 4rem;}
  .teacher .table_pagination{margin-top: 5rem;}
  .teacher .sub_bottom_text{margin: 5.5rem 0 10rem 0; font-size: 2.8rem;}
  .teacher .banner .inner{padding: 5rem 6rem 5rem 12rem;}
  .teacher .banner .con_title h4{font-size: 2rem;}
  .teacher .banner .con_box a{width: 26.4rem; height: 5.3rem; padding-right: 1rem; font-size: 2rem; border-radius: 4rem;}
  .teacher .banner .con_box a::before{right: 4.2rem; width: 1rem; height: 1.6rem;}
;}

@media screen and (max-width: 992px){
  .teacher_top{height: 18rem;}
  .teacher_top h2{font-size: 2.2rem;}
  .teacher .tab_base{margin-bottom: 3rem;}
  .teacher .category{margin-bottom: 3rem;}
  .teacher .teacher_wrap li{width: calc(33.33% - 0.7rem); height: calc(49vw - 0.7rem);}
  .teacher .teacher_wrap .table_td.img{bottom: -10vw; width: calc(33.3vw - 1.34rem); height: calc(49vw - 1.34rem);}
  .teacher .table_pagination{margin-top: 2rem;}
  .teacher .table_pagination ul{margin-top: initial;}
  .teacher .sub_bottom_text{margin: 5rem 0 8rem 0; font-size: 2.2rem;}
  .teacher .banner .inner{-webkit-box-pack: center;   -ms-flex-pack: center; justify-content: center; gap: 5rem; padding: 5rem 1rem 5rem 1rem;}
;}

@media screen and (max-width: 768px){
  .teacher .teacher_wrap li{padding: 3rem 0 0 2rem;}
  .teacher .teacher_wrap .table_td.img{width: calc(33.3vw - 1.34rem); height: calc(49vw - 1.34rem);}
  .teacher .teacher_wrap .table_td.type{margin-bottom: 1.5rem; font-size: 1.8rem;}
  .teacher .teacher_wrap .table_td.name{margin-bottom: 1.5rem; padding-bottom: 2.5rem; font-size: 1.8rem;}
  .teacher .teacher_wrap .table_td.name::before{top: 3.3rem;}
  .teacher .teacher_wrap .table_td.new{width: 5rem; height: 1.7rem; line-height: 1.5rem; font-size: 1.1rem;}
  .teacher .sub_bottom_text{font-size: 1.9rem;}
  .teacher .banner .inner{gap: 3rem; padding: 5rem 1rem 5rem 1rem;}
  .teacher .banner .con_title h4{font-size: 1.8rem;}
  .teacher .banner .con_box a{width: 22rem; height: 5rem; font-size: 1.6rem;}
  .teacher .banner .con_box a::before{right: 3rem;}
;}

@media screen and (max-width: 576px){
  .teacher_top{height: 16rem;}
  .teacher_top h2{font-size: 1.8rem;}
  .teacher .tab_base li a{font-size: 1.3rem; word-break: keep-all;}
  .teacher .teacher_wrap li{width: calc(50% - 0.5rem); height: calc(74vw - 0.5rem); padding: 3rem 0 0 2rem;}
  .teacher .teacher_wrap .table_td.img{right: -5vw; bottom: -15vw; width: calc(50vw - 1.5rem); height: calc(74vw - 1.5rem);}
  .teacher .teacher_wrap .table_td.type{margin-bottom: 1.2rem; font-size: 1.6rem;}
  .teacher .teacher_wrap .table_td.name{margin-bottom: 1.2rem; padding-bottom: 2.2rem; font-size: 1.6rem;}
  .teacher .teacher_wrap .table_td.name::before{top: 3rem;}
  .teacher .teacher_wrap .table_td.new{width: 4.5rem; height: 1.7rem; line-height: 1.6rem;}
  .teacher .sub_bottom_text{font-size: 1.6rem;}
  .teacher .banner .inner{-webkit-box-orient: vertical; -webkit-box-direction: normal;   -ms-flex-direction: column; flex-direction: column; gap: 1rem; padding: 5rem 1rem 5rem 1rem;}
  .teacher .banner .con_title h4{font-size: 1.6rem; text-align: center;}
  .teacher .banner .con_box a{width: 22rem; height: 5rem; font-size: 1.5rem;}
  .teacher .banner .con_box a::before{right: 3rem;}
;}

/*# sourceMappingURL=teacher.css.map */